<template>
  <div class="container">
    <el-container>
      <el-aside width="160px">
        <el-menu
          :defaultActive="activeIndex"
          class="el-menu-vertical-demo"  
          background-color="#545c64"
          text-color="#fff"
          active-text-color="#ffd04b" 
        >
        <el-menu-item v-for="(item,index) in menuList"         
          :index="String(index)" 
          :key="String(index)"
          :disabled="item.disabled"
          @click="activeMenu(index)">
          <el-icon>
            <template v-if="activeIndex==String(index)">
              <View />
            </template>
            <template v-else>
              <Hide />
            </template>
          </el-icon>
          <span>{{item.label}}</span>
        </el-menu-item>
        </el-menu>
      </el-aside>
      <el-container>
        <el-header>
          <p class="title">欢迎进入【{{menuList[activeIndex].label}}】自定义设置页!!!</p>
          <p class="docs">
            <span class="item" @click="openWindow('https://gitee.com/renlin901017/rl-plus-docs?_from=gitee_search')">文档</span>
            <span class="split">|</span>
            <span class="item" @click="openWindow('https://gitee.com/renlin901017/rl-plus-example')">git</span>
          </p>
        </el-header>
        <el-main>
          <router-view/>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script lang="ts" setup>
import { ElContainer, ElAside, ElHeader, ElMain, ElMenu, ElMenuItem, ElIcon } from 'element-plus';
import { View,Hide } from '@element-plus/icons-vue';
import { ref } from 'vue';
import { storage } from 'rl-utils';
import { useRouter,useRoute } from 'vue-router';

const activeIndex = ref('0')
const activeMenuData = storage.getSession('activeMenu')
if (activeMenuData) { 
  activeIndex.value=activeMenuData
}
const menuList = [
  {label:'按钮',linkTo:'/base-button',disabled:false},
  {label:'级联选择器',linkTo:'/base-cascader',disabled:false},
  {label:'多选框',linkTo:'/base-checkbox',disabled:false},
  {label:'日期选择器',linkTo:'/base-date-picker',disabled:false},
  {label:'输入框',linkTo:'/base-input',disabled:false},
  {label:'数字输入框',linkTo:'/base-input-number',disabled:false},
  {label:'单选框',linkTo:'/base-radio',disabled:false},
  {label:'评分',linkTo:'/base-rate',disabled:false},
  {label:'下拉框',linkTo:'/base-select',disabled:false},
  {label:'滑块',linkTo:'/base-slider',disabled:false},
  {label:'开关',linkTo:'/base-switch',disabled:false},
  {label:'分页',linkTo:'/base-page',disabled:false},
  {label:'表单',linkTo:'/base-form',disabled:false},
  {label:'表格',linkTo:'/base-table',disabled:false},
]
const router = useRouter()
const route = useRoute()
const activeMenu = (e) => { 
  storage.setSession('activeMenu',String(e))
  activeIndex.value = String(e)
  router.push(menuList[e].linkTo)
}
const openWindow = (url) => { 
  window.open(url)
}
</script>
<style lang="scss" scoped>
  .container{
    width: 100%;
    height: 100%;
    .el-container{
      width: 100%;
      height: 100%;
      .el-aside{
        background-color: #545c64;
      }
      .el-container{
        .el-header{
          box-shadow: 0 0 10px 0 rgba(0,0,0,.5);
          line-height: 60px;
          font-size: 20px;          
          display: flex;
          justify-content: space-between;
          .title{
            letter-spacing:4px;
            background-image:-webkit-linear-gradient(bottom,red,#fd8403,yellow); 
            background-clip:text; 
            -webkit-text-fill-color:transparent; 
          }
          .docs{
            color: #666;
            font-size: 18px;
            .split{padding:0 5px}
            .item{
              &:hover{
                cursor: pointer;
              }
            }
          }
        }
      }
    }
  }
</style>
